<script setup lang="ts">
import { ref } from 'vue'
import { useSettingStore } from '@/stores/setting';
import { useUserStore } from '@/stores/user';
import type { userInfo } from '@/api/type';
import type { UploadProps } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus';
import { updateUserInfo } from '@/api/user';
import { useTokenStore } from '@/stores/token';

const settingStore = useSettingStore();
const userStore = useUserStore();
// 日期
const calendarvalue = ref(new Date())
//用户信息部分
const user = ref<userInfo>(<userInfo>{});
user.value = userStore.userInfo;
const imageUrl = ref(user.value.avatar)
// 图片上传成功返回url
const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
) => {
  imageUrl.value = response.data;
  user.value.avatar = imageUrl.value;
}
// 提交
function submit() {
  ElMessageBox.confirm(`确认修改吗？`)
    .then(async () => {
      let res = await updateUserInfo(user.value)
      ElMessage.success("修改成功");
    })
    .catch(() => {
      console.error();
    })
}

</script>

<template>
  <main class="home">
    <template v-if="settingStore.scene === 0">
      <el-calendar v-model="calendarvalue" />
    </template>
    <template v-if="settingStore.scene === 1">
      <el-card style="width: 80%;margin-top: 40px;">
        <el-form label-width="80px">
          <div style="text-align: center;">
            <el-upload class="avatar-uploader" ref="uploadRef" action="/api/course/upload" :show-file-list="false"
              :auto-upload="true" :headers="{ Authorization: useTokenStore().token }"
              accept="image/jpg,image/jpeg,image/png" :on-success="handleAvatarSuccess">
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon">
                <Plus />
              </el-icon>
            </el-upload>
          </div>
          <el-form-item label="用户名">
            <el-input v-model="user.username" disabled></el-input>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="user.name"></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="user.phone"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="user.email"></el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="submit" style="margin-left:30% ">提交</el-button>
        <el-button @click="settingStore.scene = 0" style="margin-left:20% ">取消</el-button>
      </el-card>
    </template>
  </main>
</template>
<style scoped>
.home {
  /* height: 100%; */
  margin-left: 20px;
  margin-right: 20px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
  border-radius: 50%;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
